<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>守卫</title>
</head>
<body>
    <script src="../Vue.js"></script>
    <script src="../VueRouter.js"></script>

    <div id="app"></div>
    <script>
        let router = new VueRouter({
            routes:[
                {
                    path:'/home',
                    // 起别名
                    alise:'/a',
                    component:{
                        template:`
                            <h1>Home 页面 {{id}}</h1>
                        `,
                        props:['id'],
                    },
                    props:true
                },
                {
                    path:'/news:id',
                    alise:'/b',
                    component:{
                        template:`
                            <h1> News 的 ID是：{{id}}--name:{{name}}</h1>
                        `,
                        props:['id','name']
                    },
                    props:route =>({
                        id:route.params.id,
                        name:'zhang san'
                    }),
                    beforeRouteEnter(to, from, next) {
                        // 在渲染该组件的对应路由被 confirm 前调用
                        // 不！能！获取组件实例 `this`
                        // 因为当守卫执行前，组件实例还没被创建
                    },
                    beforeRouteUpdate(to, from, next) {
                        // 在当前路由改变，但是该组件被复用时调用
                        // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
                        // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
                        // 可以访问组件实例 `this`
                    },
                    beforeRouteLeave(to, from, next) {
                        // 导航离开该组件的对应路由时调用
                        // 可以访问组件实例 `this`
                    }
                }
            ]
        })

        // 设置全局路由前置守卫
        router.beforeEach((to,from,next)=>{
            // 在路由进行跳转之前执行，也就是在这里可以控制路由的跳转。比如过做一些权限的认证。
            // to是目标路由
            // from 是来源
            // next 控制跳转的进行
            // 进行跳转
            next();
            // 不跳转
            next(false);
            // 跳转到指定页面
            next('/login')
            // 对象形式跳转
            next({
                path:'/login',
                // 可以放params，可以放query，可以放name，以及replace等属性
            })
        })

        const vm = new Vue({
            el:'#app',
            route,
        })
    </script>
</body>
</html>